<template>
  <div class="search-area">
    <slot name="before"></slot>
    <input type="text" v-model="keyWord">
    <a class="btn" :style="`background-color: ${backgroundColor}`" href="javascript:void(0)" @click="onSearch">
      {{title}}
    </a>
    <slot name="after"></slot>
  </div>
</template>

<script>
  export default {
    name: "SearchArea",
    props: {
      title: {
        type: String,
        default: '搜索'
      },
      backgroundColor: {
        type: String,
        default: '#1595ff'
      },
      list: {
        type: Array,
        default: () => [],
      },
    },
    data() {
      return {
        keyWord: ''
      }
    },
    methods: {
      onSearch() {
        this.$emit('searchKey', {
          key: this.keyWord
        })
      }
    }
  }
</script>

<style scoped>
.search-area {
  width: 100%;
  display: flex;
}

.search-area input {
  border: 1px solid #1595ff;
  box-sizing: border-box;
  height: 50px;
  border-radius: 25px;
  flex-grow: 1;
}

.search-area .btn {
  height: 50px;
  line-height: 50px;
  background-color: #1595ff;
  padding: 0 2em;
  border-radius: 25px;
  color: #fff;
  text-decoration: none;
}
</style>
